<template>
  <div class="generator-parameter-container">
    <!-- 标题栏 -->
    <div class="header">
      <h3 class="title">发电机参数</h3>
      <div class="time-stamp">{{ currentTime }}</div>
      <div
        class="status-indicator"
        :class="{
          'status-normal': systemStatus,
          'status-error': !systemStatus,
        }"
      ></div>
    </div>

    <!-- 统一数据展示区域：采用网格布局，每行固定4个参数项 -->
    <div class="parameters-grid">
      <!-- 显示当前页的参数项 -->
      <div
        v-for="(param, index) in currentPageParameters"
        :key="currentPageStartIndex + index"
        class="parameter-item"
      >
        <div class="item-name">{{ param.name }}</div>
        <!-- 根据参数类型显示不同格式 -->
        <div v-if="param.type === 'monitoring'" class="monitoring-status">
          <span class="status-value">{{ param.value }}</span>
          <div
            class="status-circle"
            :class="{
              'status-normal':
                param.name === '负载接入状态'
                  ? param.value === 0
                  : param.value === 1,
              'status-error':
                param.name === '负载接入状态'
                  ? param.value === 1
                  : param.value === 0,
            }"
          ></div>
        </div>
        <div v-else class="item-value">
          {{ param.value }}
          <span class="unit" v-if="param.unit">{{ param.unit }}</span>
        </div>
      </div>
    </div>

    <!-- 分页控制按钮 - 单一动态按钮 -->
    <div class="pagination-controls" v-if="totalPages > 1">
      <button class="page-btn" @click="togglePage">
        {{ currentPage === totalPages ? "上一页" : "下一页" }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import StartModelWsService from "@/ws_service/startModelWsService";
import { setAlgorithmParam } from "@/api/util";
import { useUserStore } from "@/store/user";
// 系统状态和时间
const systemStatus = ref(true);
const currentTime = ref("");
// 获取user store
const userStore = useUserStore();

// 分页相关响应式数据
const currentPage = ref(1);
const itemsPerPage = 36; // 每页显示36个参数，假设4列9行的布局

// 合并所有参数：常规参数和状态监测参数
const allParameters = ref([
  // 振动参数
  { name: "发电机前支撑垂直向振动", value: 0.0, unit: "mm/s", type: "normal" },
  { name: "发电机前支撑水平向振动", value: 0.0, unit: "mm/s", type: "normal" },
  { name: "发电机后支撑垂直向振动", value: 0.0, unit: "mm/s", type: "normal" },
  { name: "发电机后支撑水平向振动", value: 0.0, unit: "mm/s", type: "normal" },

  // 轴承温度参数
  { name: "发电机驱动端轴承温度", value: 0.0, unit: "°C", type: "normal" },
  { name: "发电机非驱动端轴承温度", value: 0.0, unit: "°C", type: "normal" },
  { name: "驱动端前推力轴瓦温度", value: 0.0, unit: "°C", type: "normal" },
  { name: "驱动端后推力轴瓦温度", value: 0.0, unit: "°C", type: "normal" },

  // 冷却器温度参数
  { name: "发电机冷却器进风温度", value: 0.0, unit: "°C", type: "normal" },
  { name: "发电机冷却器出风温度1", value: 0.0, unit: "°C", type: "normal" },
  {
    name: "发电机冷却器冷却水出口温度",
    value: 0.0,
    unit: "°C",
    type: "normal",
  },
  {
    name: "发电机冷却器冷却水供水温度",
    value: 0.0,
    unit: "°C",
    type: "normal",
  },
  { name: "发电机冷却器出风温度2", value: 0.0, unit: "°C", type: "normal" },

  // 定子绕组温度参数
  ...Array.from({ length: 4 }, (_, i) => ({
    name: `发电机定子绕组温度${i + 1}`,
    value: 0.0,
    unit: "°C",
    type: "normal",
  })),

  // 状态监测参数 - 温度高报警1-4
  { name: "发电机定子绕组温度高报警1", value: 1, unit: "", type: "monitoring" },
  { name: "发电机定子绕组温度高报警2", value: 1, unit: "", type: "monitoring" },
  { name: "发电机定子绕组温度高报警3", value: 1, unit: "", type: "monitoring" },
  { name: "发电机定子绕组温度高报警4", value: 1, unit: "", type: "monitoring" },

  // 温度高停机
  { name: "发电机定子绕组温度高停机", value: 1, unit: "", type: "monitoring" },

  // 整流装置温度参数
  ...Array.from({ length: 12 }, (_, i) => ({
    name: `整流装置温度${i + 1}`,
    value: 0.0,
    unit: "°C",
    type: "normal",
  })),

  // 整流装置温度高报警
  { name: "发电机整流装置温度高报警", value: 1, unit: "", type: "monitoring" },

  // 其他参数
  {
    name: "发电机冷却器冷却水供水压力",
    value: 0.0,
    unit: "MPa",
    type: "normal",
  },
  { name: "发电机冷却器漏水1", value: 1, unit: "", type: "monitoring" },
  { name: "发电机冷却器漏水2", value: 1, unit: "", type: "monitoring" },
  { name: "发电机电加热器接通", value: 1, unit: "", type: "monitoring" },
  { name: "发电机电加热器接通指令", value: 1, unit: "", type: "monitoring" },

  // 风冷流量参数
  { name: "第一路风冷流量", value: 0.0, unit: "m³/h", type: "normal" },
  { name: "第二路风冷流量", value: 0.0, unit: "m³/h", type: "normal" },
  { name: "第三路风冷流量", value: 0.0, unit: "m³/h", type: "normal" },
  { name: "第四路风冷流量", value: 0.0, unit: "m³/h", type: "normal" },

  // 电压参数
  { name: "电压", value: 0.0, unit: "V", type: "normal" },

  // 其他参数
  { name: "水流量参数", value: 0.0, unit: "L/min", type: "normal" },
  { name: "电流参数", value: 0.0, unit: "A", type: "normal" },
  { name: "功率参数", value: 0.0, unit: "kW", type: "normal" },
  { name: "冷却水泄露", value: 1, unit: "", type: "monitoring" },
  { name: "发电机整流装置熔断器熔断", value: 1, unit: "", type: "monitoring" },
  // 负载参数
  { name: "负载接入状态", value: 0.0, unit: "", type: "monitoring" },
]);

// 数据key到参数索引的映射
const keyToIndexMap = {
  // 振动参数映射
  // 这里假设的key值，实际应用中需要根据后端数据格式调整
  vibration_1: 0, // 发电机前支撑垂直向振动
  vibration_2: 1, // 发电机前支撑水平向振动
  vibration_3: 2, // 发电机后支撑垂直向振动
  vibration_4: 3, // 发电机后支撑水平向振动

  // 轴承温度参数映射
  bearing_1: 4, // 发电机驱动端轴承温度
  bearing_2: 5, // 发电机非驱动端轴承温度
  bearing_3: 6, // 驱动端前推力轴瓦温度
  bearing_4: 7, // 驱动端后推力轴瓦温度

  // 冷却器温度参数映射
  cooler_1: 8, // 发电机冷却器进风温度
  cooler_2: 9, // 发电机冷却器出风温度1
  cooler_3: 10, // 发电机冷却器冷却水出口温度
  cooler_4: 11, // 发电机冷却器冷却水供水温度
  cooler_5: 12, // 发电机冷却器出风温度2

  // 发电机定子绕组温度映射
  "1_17_0_0": 13, // 发电机定子绕组温度1
  "1_18_0_0": 14, // 发电机定子绕组温度2
  "1_19_0_0": 15, // 发电机定子绕组温度3
  "1_20_0_0": 16, // 发电机定子绕组温度4

  // 状态监测映射
  "2_43_0_0": 17, // WindingPTC1_S（PTC系统故障开关，0表示故障，1表示正常）
  // 温度高报警2-4的key需要根据实际情况调整
  temp_alarm_2: 18, // 发电机定子绕组温度高报警2
  temp_alarm_3: 19, // 发电机定子绕组温度高报警3
  temp_alarm_4: 20, // 发电机定子绕组温度高报警4
  temp_alarm_high: 21, // 发电机定子绕组温度高高停机

  // 整流装置温度映射
  rectifier_temp_1: 22, // 整流装置温度1
  rectifier_temp_2: 23, // 整流装置温度2
  rectifier_temp_3: 24, // 整流装置温度3
  rectifier_temp_4: 25, // 整流装置温度4
  rectifier_temp_5: 26, // 整流装置温度5
  rectifier_temp_6: 27, // 整流装置温度6
  rectifier_temp_7: 28, // 整流装置温度7
  rectifier_temp_8: 29, // 整流装置温度8
  rectifier_temp_9: 30, // 整流装置温度9
  rectifier_temp_10: 31, // 整流装置温度10
  rectifier_temp_11: 32, // 整流装置温度11
  rectifier_temp_12: 33, // 整流装置温度12
  rectifier_alarm: 34, // 发电机整流装置温度高报警

  // 其他参数映射
  water_pressure: 35, // 发电机冷却器冷却水压力
  water_leak_1: 36, // 发电机冷却器漏水1
  water_leak_2: 37, // 发电机冷却器漏水2
  heater_on: 38, // 发电机电加热器接通
  heater_cmd: 39, // 发电机电加热器接通指令

  // 风冷流量映射
  "2_38_0_0": 40, // 第一路的给定风冷流量
  "2_39_0_0": 41, // 第二路的给定风冷流量
  "2_40_0_0": 42, // 第三路的给定风冷流量
  "2_36_0_0": 43, // 第四路的给定风冷流量

  // 其他参数映射
  "1_3_0_0": 44, // 电压参数
  "2_41_0_0": 45, // 水流量参数
  "1_2_0_0": 46, // 电流参数

  //负载参数
  "2_18_0_0": 47, // 功率参数

  // 注意：温度高报警、熔断器熔断和功率参数需要根据其他参数计算得出
};

// 处理WebSocket接收到的数据
const generaterProcessData = (data) => {
  if (!data || typeof data !== "object") return;

  // 更新直接映射的参数
  Object.entries(data).forEach(([key, value]) => {
    if (key in keyToIndexMap && Array.isArray(value) && value.length > 0) {
      const index = keyToIndexMap[key];
      //值应该只保留最多两位小数
      allParameters.value[index].value = parseFloat(
        value[value.length - 1].toFixed(2)
      );
    }
  });
  // console.log("发电机参数：", allParameters.value);

  // 为了UI显示，我们仍然需要更新温度高报警状态，但不再处理报警逻辑
  // 实际的报警处理已经迁移到TroubleShootingPage组件中
  const hasHighTemperature = allParameters.value
    .slice(8, 12) // 定子绕组温度参数索引8-11
    .some((param) => param.value > 145); // 假设145°C为阈值
  // data["2_18_0_0"][data["2_18_0_0"].length - 1] === 1 || // 负载接入状态
  // data["2_41_0_0"][data["2_41_0_0"].length - 1] < 50 || // 水流量参数
  // data["2_38_0_0"][data["2_38_0_0"].length - 1] < 2.5; // 风冷流量参数

  // 更新温度高报警状态仅用于UI显示
  allParameters.value[17].value = hasHighTemperature ? 0 : 1; // 温度高报警1
  allParameters.value[18].value = hasHighTemperature ? 0 : 1; // 温度高报警2
  allParameters.value[19].value = hasHighTemperature ? 0 : 1; // 温度高报警3
  allParameters.value[20].value = hasHighTemperature ? 0 : 1; // 温度高报警4

  // 温度高高停机状态（假设阈值为170°C）
  const hasVeryHighTemperature = allParameters.value
    .slice(13, 17) // 定子绕组温度参数索引13-16
    .some((param) => param.value > 170);
  // allParameters.value[21].value = hasVeryHighTemperature ? 0 : 1;

  // 计算功率参数（电压 × 电流 / 1000 转换为kW）
  const voltage =
    data["1_3_0_0"] && data["1_3_0_0"].length > 0
      ? data["1_3_0_0"][data["1_3_0_0"].length - 1]
      : 0; // 电压参数索引44
  const current =
    data["1_2_0_0"] && data["1_2_0_0"].length > 0
      ? data["1_2_0_0"][data["1_2_0_0"].length - 1]
      : 0; // 电流参数索引46
  const power = (voltage * current) / 1000; // 计算功率并转换为kW
  allParameters.value[47].value = parseFloat(power.toFixed(2)); // 更新功率参数，保留两位小数

  // 计算熔断器熔断状态（可以根据电压和积分器参数判断）
  // const voltage = allParameters.value[8].value;
  // const isFuseBroken = voltage < 10; // 假设电压低于10V表示熔断器熔断
  // allParameters.value[25].value = isFuseBroken ? 0 : 1; // 更新熔断器熔断状态

  // 更新系统整体状态 - 检查所有监测项
  // 监测项包括：温度高报警1-4、温度高高报警、冷却器漏水1-2、电加热器状态、整流装置温度高报警等
  const monitoringStatuses = allParameters.value.filter(
    (param) => param.type === "monitoring" && param.name !== "负载接入状态"
  );
  systemStatus.value = monitoringStatuses.every((param) => param.value === 1);
};

// 更新时间
const updateTime = () => {
  const now = new Date();
  currentTime.value = now.toLocaleDateString().slice(0, 19).replace("T", " ");
};

// 设置算法参数的函数
const setupAlgorithmParams = () => {
  // 从user store获取copyNum
  const copyNum = userStore.copyNum;

  // 设置4个属性的值
  setAlgorithmParam("2_38_0_0", 2.5, copyNum);
  setAlgorithmParam("2_39_0_0", 2.5, copyNum);
  setAlgorithmParam("2_40_0_0", 2.5, copyNum);
  setAlgorithmParam("2_36_0_0", 2.5, copyNum);

  console.log("已设置风冷流量参数值为25");
};

// 分页计算属性
const totalPages = computed(() => {
  return Math.ceil(allParameters.value.length / itemsPerPage);
});

const currentPageStartIndex = computed(() => {
  return (currentPage.value - 1) * itemsPerPage;
});

const currentPageParameters = computed(() => {
  const start = currentPageStartIndex.value;
  return allParameters.value.slice(start, start + itemsPerPage);
});

// 分页控制方法 - 从第一页开始一直显示下一页，直到最后一页才显示上一页
const togglePage = () => {
  if (currentPage.value === totalPages.value) {
    // 当前是最后一页，切换到上一页
    currentPage.value--;
  } else {
    // 当前不是最后一页，切换到下一页
    currentPage.value++;
  }
};

// 定时器引用 - 只保留时间更新定时器
let timeTimer = null;

// 生命周期钩子
onMounted(() => {
  // 设置时间更新定时器
  updateTime();
  timeTimer = setInterval(updateTime, 1000);

  StartModelWsService.onProcessedData(generaterProcessData);

  // 启动算法后设置参数
  // setupAlgorithmParams();
});

onUnmounted(() => {
  // 清除定时器
  if (timeTimer) clearInterval(timeTimer);
  StartModelWsService.offProcessedData(generaterProcessData);
});
</script>

<style scoped>
.generator-parameter-container {
  background-color: #2c3e50;
  border-radius: 8px;
  padding: 16px;
  color: #ecf0f1;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 100%;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #34495e;
}

.title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #3498db;
}

.time-stamp {
  font-size: 14px;
  color: #95a5a6;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 12px;
}

.status-normal {
  background-color: #27ae60;
  box-shadow: 0 0 8px rgba(39, 174, 96, 0.6);
}

.status-error {
  background-color: #e74c3c;
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
}

/* 参数网格布局 - 每行固定4个参数项 */
.parameters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  height: calc(100vh - 250px);
  overflow: hidden;
}

/* 参数项样式 */
.parameter-item {
  background-color: #34495e;
  padding: 12px;
  border-radius: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 60px;
  transition: all 0.2s ease;
}

.parameter-item:hover {
  background-color: #3e5771;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.item-name {
  font-size: 12px;
  color: #bdc3c7;
  font-weight: 500;
  line-height: 1.3;
}

.item-value {
  font-size: 16px;
  font-weight: 600;
  color: #e67e22;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.unit {
  font-size: 12px;
  color: #95a5a6;
  font-weight: normal;
}

.monitoring-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.status-value {
  font-size: 14px;
  color: #bdc3c7;
}

.status-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.status-circle.status-normal {
  background-color: #27ae60;
  box-shadow: 0 0 8px rgba(39, 174, 96, 0.6);
}

.status-circle.status-error {
  background-color: #e74c3c;
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* 分页控制样式 - 单一动态按钮 */
.pagination-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding: 8px 0;
}

.page-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  min-width: 80px;
  text-align: center;
}

.page-btn:hover {
  background-color: #2980b9;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .parameters-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .parameters-grid {
    grid-template-columns: repeat(2, 1fr);
    height: calc(100vh - 300px);
  }

  .header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .title {
    width: 100%;
    text-align: center;
  }

  .pagination-controls {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .parameters-grid {
    grid-template-columns: 1fr;
    height: calc(100vh - 350px);
  }

  .generator-parameter-container {
    padding: 12px;
  }

  .parameter-item {
    padding: 10px;
  }

  .page-btn {
    width: 100%;
    padding: 10px;
  }
}
</style>